<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <button @click="playRecording" :disabled="!canPlayRecording">播放录音</button>
    <button @click="downloadRecording" :disabled="!canDownloadRecording">下载录音</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import AudioRecorder from 'js-audio-recorder'

export default {
  name: 'AudioRecorderComponent',
  setup() {
    const isRecording = ref(false)
    const canPlayRecording = ref(false)
    const canDownloadRecording = ref(false)
    const audioRecorder = new AudioRecorder({
      type: 'wav',
      sampleRate: 16000,
      numChannels: 1
    })

    const startRecording = () => {
      isRecording.value = true
      canPlayRecording.value = false
      canDownloadRecording.value = false
      audioRecorder.start()
    }

    const stopRecording = () => {
      isRecording.value = false
      canPlayRecording.value = true
      canDownloadRecording.value = true
    }

    const playRecording = () => {
      audioRecorder.play()
    }

    const downloadRecording = () => {
      console.log(audioRecorder)
      audioRecorder.downloadWAV()
    }

    return {
      isRecording,
      canPlayRecording,
      canDownloadRecording,
      startRecording,
      stopRecording,
      playRecording,
      downloadRecording
    }
  }
}
</script>
